<template>
  <div class="account-settings-info-view">
    <div class="title">密钥设置</div>
    <a-alert
      message="小提示"
      description="在这里你可以上传并使用已有的密钥对，没有上传密钥的情况下，会在首次添加主机时自动生成密钥对。"
      type="info"
      style="width: 650px"
    />
    <a-form-model layout="vertical" style="max-width: 650px;margin-top: 12px">
      <a-form-model-item
        label="公钥"
        :required="false"
        style="margin-top: 20px">
        <a-textarea placeholder="请输入公钥" v-model=settings.public_key :auto-size="pubTextSize"/>
      </a-form-model-item>
      <a-form-model-item
        label="私钥"
        :required="false"
      >
        <a-textarea placeholder="请输入私钥" v-model=settings.private_key :auto-size="keyTextSize"/>
      </a-form-model-item>
      <a-form-item>
        <a-button type="primary" @click="showConfirm">保存设置</a-button>
      </a-form-item>
    </a-form-model>
  </div>
</template>

<script>
  import * as api from '@/api/system/settingManage'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        keyTextSize: { minRows: 13, maxRows: 13 },
        pubTextSize: { minRows: 6, maxRows: 8 },
      }
    },
    computed: {
      ...mapGetters(['settings'])
    },
    methods: {
      submitKeyInfo() {
        const dataList = [
          { key: 'public_key', value: this.settings.public_key },
          { key: 'private_key', value: this.settings.private_key }
        ]
        api.addObj({ data: dataList }).then((res) => {
          if (res.success) {
            this.$message.success('密钥对更新成功！')
          } else {
            this.$message.error(res.message)
          }
        })
      },
      showConfirm() {
        this.$confirm({
          title: '密钥修改确认！',
          content: '请谨慎修改密钥对，修改密钥对可能会让现有的主机都无法进行验证，影响与主机相关的各项功能',
          icon: 'warning',
          onOk: this.submitKeyInfo,
          onCancel() {
            console.log('Cancel')
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>

</style>

